/*
  三角形

  三个顶点一个平面,一个顶点三个坐标值，需要9个浮点数存贮

  const vertexArray = new Float32Array([
    // 三角形三个顶点坐标的x、y、z值
    0.0, 0.0, 0.0,//顶点1坐标
    1.0, 0.0, 0.0,//顶点2坐标
    0.0, 1.0, 0.0,//顶点3坐标
  ]);


  //设置几何体位置属性
  geometry.attributes.position = vertexArray;
  或者 geometry.setAttribute(
        "position", 
        new THREE.BufferAttribute(positionArray, 3)
      );

*/
import *  as THREE from 'three'
import { AxesHelper } from 'three';
import gsap from 'gsap'
import * as dat from 'dat.gui'

//导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

//1.创建场景
const scene = new THREE.Scene()

//2.创建相机 (透视相机)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

//添加物体
//创建几何体
for(let i=0; i<50; i++){
  //每一个三角形，需要三个顶点, 每个顶点需要三个值
  //创建一个面
  //缓冲类型几何体，是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就是定义顶点数据
  const geometry = new THREE.BufferGeometry();
  const positionArray = new Float32Array(9);
  for(let j=0;j<9;j++){
    positionArray[j] = Math.random() * 5;
  }
  //这里使用setAttribute方法将顶点位置数组设置为几何体的position属性。
  //BufferAttribute用于将数据绑定到几何体，其中positionArray是数据数组，3表示每个顶点有3个坐标值。
  geometry.setAttribute(
    "position", 
    new THREE.BufferAttribute(positionArray, 3)
  );
  let color = new THREE.Color(Math.random(), Math.random(), Math.random());

  const material = new THREE.MeshBasicMaterial({ 
    color: color,
    transparent: true,
    opacity: 0.5
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

}






//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

//添加坐标辅助器
const axesHelper = new AxesHelper(5)
scene.add(axesHelper)
//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const clock=new THREE.Clock()

function render(){
  controls.update()
  //获取时钟运行的总时长
  let time = clock.getElapsedTime();
  renderer.render(scene,camera)
  //调用下一帧的时候就会调用render渲染
  requestAnimationFrame(render)
}

render();